<template>
  <div>

    <!--条件查询-->
    <el-form :inline="true" :model="queryForm" ref="queryForm" class="demo-form-inline">
      <el-form-item label="系列名称" prop="prodChineseName">
        <el-input v-model="queryForm.prodChineseName" placeholder="请输入系列名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="executeQuery()">查询</el-button>
        <el-button @click="resetForm('queryForm')">重置</el-button>
        <el-button type="success" @click="toAdd()">增加</el-button>
      </el-form-item>
    </el-form>

    <!--表格-->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="prodId" label="产品系列ID" width="200"></el-table-column>
      <el-table-column prop="prodChineseName" label="产品中文名" width="300"></el-table-column>
      <el-table-column prop="prodEnglishName" label="产品英文名" width="300"></el-table-column>
      <el-table-column prop="prodChannelName" label="汇款信息概略" width="300"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="warning" @click="toEdit(scope.$index, scope.row)">修改</el-button>
          <el-button size="mini" type="primary" @click="toRemi(scope.$index, scope.row)">汇款信息</el-button>
          <el-button size="mini" type="danger" @click="executeDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   :current-page="pageInfo.page"
                   :page-sizes="[5, 10, 15, 20]"
                   :page-size="pageInfo.pageSize"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="pageInfo.totalNum">
    </el-pagination>

    <!--增加对话框-->
    <el-dialog title="添加" :visible.sync="addDialogFormVisible">
      <el-form :model="addForm">
        <el-form-item label="产品渠道" :label-width="formLabelWidth">
          <el-select v-model="addForm.prodParentChannel" placeholder="请选择产品渠道">
            <el-option label="香港资管" value="香港资管"></el-option>
            <el-option label="内地资管" value="内地资管"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="产品分类" :label-width="formLabelWidth">
          <el-select v-model="addForm.prodFirsClass" placeholder="请选择产品分类">
            <el-option label="基金" value="基金"></el-option>
            <el-option label="私募" value="私募"></el-option>
            <el-option label="保险" value="保险"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="产品中文名称" :label-width="formLabelWidth">
          <el-input v-model="addForm.prodChineseName" autocomplete="off" placeholder="请输入产品中文名称"></el-input>
        </el-form-item>
        <el-form-item label="产品英文名称" :label-width="formLabelWidth">
          <el-input v-model="addForm.prodEnglishName" autocomplete="off" placeholder="请输入产品英文名称"></el-input>
        </el-form-item>
        <el-form-item label="资管机构名称" :label-width="formLabelWidth">
          <el-select v-model="addForm.prodChannelName" placeholder="请选择资管机构名称">
            <el-option :key="oneChannel.prodChannelId" :label="oneChannel.prodChannelName"
                       :value="oneChannel.prodChannelName" v-for="oneChannel in channelData"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addDialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="executeAdd()">确 定</el-button>
      </div>
    </el-dialog>

    <!--修改对话框-->
    <el-dialog title="修改" :visible.sync="editDialogFormVisible">
      <el-form :model="editForm">
        <el-form-item label="产品渠道" :label-width="formLabelWidth">
          <el-select v-model="editForm.prodParentChannel" placeholder="请选择产品渠道">
            <el-option label="香港资管" value="香港资管"></el-option>
            <el-option label="内地资管" value="内地资管"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="产品分类" :label-width="formLabelWidth">
          <el-select v-model="editForm.prodFirsClass" placeholder="请选择产品分类">
            <el-option label="基金" value="基金"></el-option>
            <el-option label="私募" value="私募"></el-option>
            <el-option label="保险" value="保险"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="产品中文名称" :label-width="formLabelWidth">
          <el-input v-model="editForm.prodChineseName" autocomplete="off" placeholder="请输入产品中文名称"></el-input>
        </el-form-item>
        <el-form-item label="产品英文名称" :label-width="formLabelWidth">
          <el-input v-model="editForm.prodEnglishName" autocomplete="off" placeholder="请输入产品英文名称"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editDialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="executeEdit()">确 定</el-button>
      </div>
    </el-dialog>

    <!--汇款信息对话框-->
    <el-dialog title="汇款信息" :visible.sync="remiDialogFormVisible" style="text-align: left">
      <el-form :model="remiForm">
        <el-row>
          <el-col :span="12">
            <el-form-item label="收款银行名称" :label-width="formLabelWidth">
              <el-input v-model="remiForm.remiBankName" autocomplete="off" placeholder="请输入收款银行名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="银行SWIFT码" :label-width="formLabelWidth">
              <el-input v-model="remiForm.remiSwift" autocomplete="off" placeholder="请输入银行SWIFT码"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="BANK CODE" :label-width="formLabelWidth">
              <el-input v-model="remiForm.remiBankCode" autocomplete="off" placeholder="请输入BANK CODE"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="CNAPS编号" :label-width="formLabelWidth">
              <el-input v-model="remiForm.remiCnaps" autocomplete="off" placeholder="请输入CNAPS编号"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <!--<el-form-item label="收款银行地址" :label-width="formLabelWidth">
              <el-input v-model="remiForm.remiBankAddress" autocomplete="off" placeholder="请输入收款银行地址"></el-input>
            </el-form-item>-->
            <div class="grid-content bg-purple">
              <el-form-item label="收款银行地址" :label-width="formLabelWidth" >
                <el-cascader
                    v-model="area"
                    :options="areaData"
                    @change="areaChange">
                </el-cascader>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <el-form-item label="收款人姓名" :label-width="formLabelWidth">
              <el-input v-model="remiForm.remiPeopleName" autocomplete="off" placeholder="请输入收款人姓名"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="收款人账号" :label-width="formLabelWidth">
          <el-input v-model="remiForm.remiAccount" autocomplete="off" placeholder="请输入收款人账号"></el-input>
        </el-form-item>
        <el-form-item label="收款人地址" :label-width="formLabelWidth">
          <el-input v-model="remiForm.remiPeopleAddress" autocomplete="off" placeholder="请输入收款人地址"></el-input>
        </el-form-item>
        <!--<el-form-item label="资管机构" :label-width="formLabelWidth">
          <el-input v-model="remiForm.prodChannelName" autocomplete="off" :disabled="true"></el-input>
        </el-form-item>-->
        <el-form-item label="资管机构" :label-width="formLabelWidth" >
          <el-select v-model="remiForm.prodChannelName" placeholder="请选择资管机构名称" :disabled="true">
            <el-option :key="oneChannel.prodChannelId" :label="oneChannel.prodChannelName"
                       :value="oneChannel.prodChannelName" v-for="oneChannel in channelData"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="remiDialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="executeRemi()">保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  provinceAndCityData,
  regionData,
  provinceAndCityDataPlus,
  regionDataPlus,
  CodeToText,
  TextToCode,
} from "element-china-area-data";
export default {
  data() {
    return {
      areaData: [],
      /* 编码值 */
      area: [],
      tableData: [],
      pageInfo: {
        page: 2,
        pageSize: 20,
        totalNum: 50,
      },
      queryForm: {
        prodChineseName: ''
      },
      channelData: [],
      addDialogFormVisible: false,
      addForm: {
        prodParentChannel: '',
        prodFirsClass: '',
        prodChineseName: '',
        prodEnglishName: '',
        prodChannelName: '',
      },
      editDialogFormVisible: false,
      editForm: {
        prodId: '',
        prodParentChannel: '',
        prodFirsClass: '',
        prodChineseName: '',
        prodEnglishName: '',
      },
      remiDialogFormVisible: false,
      remiForm: {
        prodChannelName: '',
        remiAccount: '',
        remiBankAddress: '',
        remiBankCode: '',
        remiBankName: '',
        remiCnaps: '',
        remiPeopleAddress: '',
        remiPeopleName: '',
        remiSwift: '',
      },
      formLabelWidth: '120px',
    }
  },
  methods: {

    areaChange(area) {
      this.remiForm.remiBankAddress = area.join(",");
    },
    toAdd() {
      this.addDialogFormVisible = true;
      this.addForm = {};
      this.queryChannel();
    },
    executeAdd() {
      this.addDialogFormVisible = false;
      this.operateCUD("/series/add", this.$qs.stringify(this.addForm));
    },
    toEdit(index, row) {
      this.editDialogFormVisible = true;
      var reqData = "prodId=" + row.prodId;
      this.queryUserByUid(reqData);
    },
    queryUserByUid(reqData) {
      this.$axios
          .post("/series/toEdit", reqData)
          .then((resp) => {
            this.editForm = resp.data.returnData;
          })
          .catch((error) => {
            console.log(error);
          });
    },
    executeEdit() {
      this.editDialogFormVisible = false;
      this.operateCUD("/series/edit", this.$qs.stringify(this.editForm));
    },
    toRemi(index, row) {
      this.remiDialogFormVisible = true;
      this.areaData = regionData;
      var reqData = "prodId=" + row.prodId;
      this.queryUserByUidRemi(reqData);
      this.queryChannel();
    },
    queryUserByUidRemi(reqData) {
      this.$axios
          .post("/series/toRemi", reqData)
          .then((resp) => {
            this.remiForm = resp.data.returnData;
            this.area=resp.data.returnData.remiBankAddress.split(",");
          })
          .catch((error) => {
            console.log(error);
          });
    },
    executeRemi() {
      this.remiDialogFormVisible = false;
      this.operateCUD("/series/remi", this.$qs.stringify(this.remiForm));
    },
    handleSizeChange(val) {
      this.pageInfo.page = 1;
      this.pageInfo.pageSize = val;
      var reqData = this.$qs.stringify(this.pageInfo) + "&" + this.$qs.stringify(this.queryForm);
      this.queryProd(reqData);
    },
    handleCurrentChange(val) {
      this.pageInfo.page = val;
      var reqData = this.$qs.stringify(this.pageInfo) + "&" + this.$qs.stringify(this.queryForm);
      this.queryProd(reqData);
    },
    executeQuery() {
      var reqData = this.$qs.stringify(this.queryForm);
      this.queryProd(reqData);
    },
    resetForm(queryForm) {
      this.$refs[queryForm].resetFields();
      this.queryProd("");
    },
    queryChannel() {
      this.$axios
          .post("/series/queryChannel", "")
          .then((resp) => {
            this.channelData = resp.data.returnData;
          })
          .catch((error) => {
            console.log(error);
          });
    },
    executeDelete(index, row) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        var reqData="prodId="+row.prodId;
        this.operateCUD("/series/delete",reqData);
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    operateCUD(reqUrl, reqData) {
      this.$axios.get(reqUrl + "?" + reqData)
          .then(resp => {
            if (resp.data.returnCode === 2002) {
              this.$message({
                showClose: true,
                message: resp.data.returnMsg,
                type: 'success'
              });
            } else if (resp.data.returnCode === 4002) {
              this.$message({
                showClose: true,
                message: resp.data.returnMsg,
                type: 'error'
              });
            }
            ;
            this.pageInfo.page = 1;
            this.pageInfo.pageSize = 5;
            var reqData = this.$qs.stringify(this.pageInfo) + "&" + this.$qs.stringify(this.queryForm);
            this.queryProd(reqData);
          })
          .catch(error => {
            console.log(error)
          });
    },
    queryProd(reqData) {
      this.$axios.post("/series/query", reqData).then(resp => {
        this.tableData = resp.data.returnData.productCategories;
        this.pageInfo = resp.data.returnData.pageInfo;
      })
          .catch(error => {
            console.log(error);
          })
    },
  },
  mounted() {
    this.queryProd("");
  },
}
</script>
<style>
</style>






